<template>
  <div>
    排版管理
    <ElderlyDetail></ElderlyDetail>
    <el-card style="margin-top: 20px;">
        <el-table
    ref="singleTableRef"
    :data="tableData"
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column property="day" label="" width="120" />
    <el-table-column v-for="item in week" :property="item" :label="item">
      <template #default="scope">
        <!-- {{ scope.row[item] }} -->
       <staffItemAdd :schedule="{week:item, elderlyId:Number(rotate.query.id),day:scope.row.day}"></staffItemAdd>
        <staffItem @reload="reloadHandle" v-for="staff in scope.row[item]" :staff="staff"></staffItem>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
  </div>
</template>
<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'
import ElderlyDetail from '../../components/elderly/ElderlyDetail.vue';
import { getElderlySchedule } from '../../apis/elderly/elderly';
import { useRoute } from 'vue-router';
import { Schedule } from '../../apis/elderly/type';
import staffItem from '../../components/elderly/staffItem.vue';
import staffItemAdd from '../../components/elderly/staffItemAdd.vue';
const rotate=useRoute();
const tableData=ref<Record<string,string | Schedule[]>[]>([]);
const days = ["白班", "夜班"];
const week = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const getElderlyScheduleData=async ()=>{
    const res=await getElderlySchedule(Number(rotate.query.id));
    const data=res.data.list;
    tableData.value = days.map(day => {
            let work:Record<string,string | Schedule[]> = { day }
            week.forEach((item:any) => {
                work[item] = data.filter(dataItem => dataItem.week == item && dataItem.day == work.day);
            })
            return work;
        })
}
getElderlyScheduleData();
const reloadHandle=()=>{
    getElderlyScheduleData();
}
</script>
<style scoped>
</style>